<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
        <input type="text" v-model="msg">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 学习钩子函数学什么？
        //1. 如何注册钩子函数
        //2. 钩子函数中的this的指向（所有的钩子函数中的this指向的都是当前的vue实例）
        //3. 钩子函数的触发顺序以及触发时机


        //1. 创建 create

        // beforeCreate:  初始化数据之前执行的（拿不到数据）
        // created: 初始化数据完成之后执行的 （可以拿到数据了）

        //2. 挂载 mount
        // beforeMount:  当渲染好的页面元素被挂载到页面之前调用（拿不到有数据的DOM的，指令什么样，拿到的还是原样的，并未解析）
        // mounted:      当渲染好的页面元素被挂载到页面之后调用（可以操作有数据的DOM了）

        //3. 更新 update
        // beforeUpdate: 当有数据发生变化，但dom还未更新之前调用，此时如果访问dom，拿到的内容还是旧内容
        // updated: 当有数据发生变化，dom也更新完成之后调用，此时如果访问dom，拿到的就是新内容了


        //4. 销毁 destroy
        //当vm.$destroy方法被调用的时候，vm对象就要销毁了
        //销毁指的是功能解除，不再做任何的数据绑定更新操作，但是vm对象还在

        // beforeDestroy: 在功能销毁前调用
        // destroyed: 在功能销毁后调用



        // 
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello World"
            },
            beforeCreate() {
                console.log("beforeCreate被调用了", this.msg)
            },
            created() {
                console.log("created被调用了", this.msg)
            },
            beforeMount() {
                console.log("beforeMount被调用了")
                console.log(document.querySelector("#app").innerHTML)
            },
            mounted() {
                console.log("mounted被调用了")
                console.log(document.querySelector("#app").innerHTML)
            },
            beforeUpdate() {
                console.log("beforeUpdate被调用了")
                console.log(document.querySelector("#app").innerHTML)
            },
            updated() {
                console.log("updated被调用了")
                console.log(document.querySelector("#app").innerHTML)
            },
            beforeDestroy() {
                console.log("beforeDestroy被调用了") 
            },
            destroyed() {
                console.log("destroyed被调用了")
            }
        })



    </script>
</body>

</html>